<template>
  <div class="bottom-content">
    <template v-for="(item, index) in panelItems" :key="item">
      <div :class="['item', `panel${item.id}`]">
        <div class="pan-left">
          <div class="title">{{ item.title }}</div>
          <!-- 数据动画 -->
          <span :id="`total-num-${item.id}`" class="number">{{
            item.totalNum
          }}</span>
          <span class="unit">{{ item.unit }}</span>
        </div>
        <div class="pan-right">
          <span
            :class="['triangle', item.isUp ? 'up-triangle' : 'down-triangle']"
          ></span>
          <!-- 数据动画 -->
          <span :id="`percentage-num-${item.id}`" class="percentage">{{
            item.percentage
          }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { onMounted, watch, nextTick } from 'vue'
  import { CountUp } from 'countup.js'

  const props = defineProps({
    panelItems: {
      type: Array,
      default: function () {
        return []
      },
    },
  })

  function startAnimation(panelItems = []) {
    const option1 = {
      decimalPlaces: 1, // 保留小数位数
      duration: 2,
      useGrouping: false,
    }

    const option2 = {
      decimalPlaces: 1, // 保留小数位数
      duration: 2,
      useGrouping: false,
      suffix: '%',
    }

    panelItems.forEach((item) => {
      new CountUp(`total-num-${item.id}`, item.totalNum, option1).start()
      new CountUp(`percentage-num-${item.id}`, item.totalNum, option2).start()
    })
  }

  watch(
    () => props.panelItems,
    (newVal, oldVal) => {
      // 等待dom渲染完毕
      nextTick(() => {
        startAnimation(newVal)
      })
    }
  )

  onMounted(() => {
    startAnimation(props.panelItems)
  })
</script>

<style scoped lang="scss">
  .bottom-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* padding-top: 40px; */
  }

  .bottom-content .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;

    flex: 1;
    height: 100%;
    padding: 0 10px 0 35px;
    /* border: 1px solid red; */
  }

  .bottom .panel1 {
  }

  .bottom-content .pan-left {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.8;
  }
  .bottom-content .pan-left .title {
    color: white;
  }
  .bottom-content .pan-left .number {
    font-size: 36px;
    font-weight: bold;
    color: #23aeff;
    line-height: 60px;
  }

  .bottom-content .pan-left .unit {
    font-size: 18px;
    color: #23aeff;
  }

  .bottom-content .pan-right {
    margin-top: 35px;
  }

  .bottom-content .panel1 .pan-right .up-triangle {
    display: inline-block;
    margin-bottom: 4px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #c70013;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }
  .bottom .panel1 .pan-right .percentage {
    color: #c70013;
  }
  .bottom .panel2 .pan-right .up-triangle {
    display: inline-block;
    margin-bottom: 4px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #c70013;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }
  .bottom-content .panel2 .pan-right .percentage {
    color: #c70013;
  }

  .bottom-content .panel3 .pan-right .down-triangle {
    display: inline-block;
    margin-bottom: 1px;
    width: 0;
    height: 0;
    border-top: 8px solid #37a73f;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }
  .bottom-content .panel3 .pan-right .percentage {
    color: #37a73f;
  }
</style>
